import React, { Component } from "react";

class App extends Component {
  state = {
    name: "zhangsan",
    age: 20,
    show: true,
  };

  handleClick = () => {
    // 普通函数 -> 调用者 window
    // 箭头函数 -> 外层
    // 构造函数 -> 实例
    // 事件处理函数 -> 事件对象
    // 自执行函数 -> window
    // 严格模式 -> undefined
    // 定时器 -> window
    // console.log(this);

    // 改变state的数据必须使用setState函数
    // setState有两个参数，第二个是可选的
    // 第一个参数可以是对象
    // 第二个参数是一个回调函数，是在上面改变结束以后同步调用
    // this.setState(
    //   {
    //     name: "lisi",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //   }
    // );

    // 第一个参数也可以是函数来返回对象，并且这个函数可以接收前一次的state作为参数
    // 这种写法也可以接收第二个参数作为回调函数
    this.setState(
      (prevState) => {
        return {
          age: prevState.age + 1,
        };
      },
      () => {
        console.log(this.state.age);
      }
    );

    // 如果这一次的改变，不需要用到前一次的state的值，用对象，更简单
    // 如果这一次的改变，需要依赖于前一次的state的值，用函数，更安全

    // this.setState是在合成事件是异步的
    // this.setState是在生命周期是异步的
    // this.setState如果在定时器里面，18版本改成了异步，在17及以前版本是同步的
    // this.setState如果在原生js事件里面，18版本改成了异步，在17及以前版本是同步的
  };

  handleClick2() {
    this.setState((prevState) => {
      return {
        show: !prevState.show,
      };
    });
    // this.setState({
    //   show: !this.state.show,
    // });
  }

  render() {
    return (
      <>
        <h2>setState</h2>
        <p>
          我的姓名是{this.state.name}, 我的年龄是{this.state.age}
        </p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        {/* <button onClick={this.handleClick}>btn</button> */}
        <button id="btn">btn</button>

        <hr />

        {this.state.show && <p>你看到我了</p>}
        <button onClick={this.handleClick2.bind(this)}>btn2</button>
      </>
    );
  }

  // 挂载结束的生命周期,相当于vue的mounted
  componentDidMount() {
    // this.setState({
    //   name: "wangwu",
    // });
    // console.log(this.state.name);

    // setTimeout(() => {
    //   this.setState({
    //     name: "wangwu",
    //   });
    //   console.log(this.state.name);
    // }, 2000);

    document.querySelector("#btn").addEventListener("click", () => {
      this.setState({
        name: "wangwu",
      });
      console.log(this.state.name);
    });
  }
}

export default App;
